<template>
    <div>
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color:  rgb(238, 241, 246)">
                <el-menu style="height: 100%">
                    <el-menu-item  > <i class="el-icon-shopping-bag-1"></i><span style="font-size: medium">汤臣亿品</span></el-menu-item>

                    <!--一级菜单-->
                        <el-submenu  index="" v-for="(menu1,index) in menus"  v-if="menu1.parentId == 0"  :unique-opened="true"    :index="index+''" >
                            <template slot="title" >
                                <i class="el-icon-user-solid"  ></i> <span>{{menu1.menuName}}</span>
                            </template>

                            <!--二级菜单-->
                            <template v-for="menu2 in menus" >
                                <el-submenu index=""  v-if="menu1.menuId==menu2.parentId" >
                                    <template slot="title">
                                        <router-link :to="'/'+menu2.path"     >
                                            {{menu2.menuName}}
                                        </router-link>
                                    </template>

                                    <!--三级菜单-->
                                    <template  v-for="menu3 in menus" >
                                        <el-menu-item   v-if="menu2.menuId==menu3.parentId"  >
                                            <router-link :to="'/'+menu3.path" :underline="false">
                                                {{menu3.menuName}}
                                            </router-link>
                                        </el-menu-item>
                                    </template>


                                </el-submenu>
                            </template>
                        </el-submenu>

                </el-menu>

            </el-aside>
            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-page-header @back="goBack" content=""  ></el-page-header>
                </el-header>

                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>



<script>
    export default {
        name: "Menu",
        data(){
            return{
                menus:[],//系统菜单
                name:""
            }
        },
        methods:{

            goBack() {
                console.log('go back');
                this.$router.push('/menu')
            },
            loadMenus(){

                //从本地获取用户名
                this.name = localStorage.getItem("username");
                console.log(this.name)
                this.axios.get("http://localhost:8080/sysUser/menus/"+this.name)
                    .then(result => {
                        // console.log(result.data.data)
                        this.menus = result.data.data;
                    });

            },

        },
        created() {
            this.loadMenus();
        }
    }
</script>

<style>
    a {
        text-decoration: none;
    }
    .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
        display: none;

    }

    .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
        display: none;

    }


</style>
